<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="请假申请人" name="applicant">
					<uni-easyinput type="text" v-model="formData.applicant" placeholder="请输入姓名" disabled />
				</uni-forms-item>
				<uni-forms-item label="关联请假单" name="leaveId" v-show="!leaveIdInfo.id">
					<view class="" style="display: flex;">
						<u-button class="button" type="primary" :plain="true" text="选择" size="small" @click="clickOpen" style="width: 160rpx;"></u-button>
						<view class="" style="flex: 1;"></view>
					</view>
				</uni-forms-item>
				<block v-if="leaveIdInfo.id">
					<uni-forms-item label="请假开始时间">
						<uni-datetime-picker disabled type="datetime" v-model="leaveIdInfo.startTime" return-type="timestamp" placeholder="请选择消假开始时间" />
					</uni-forms-item>
					<uni-forms-item label="请假结束时间">
						<uni-datetime-picker disabled type="datetime" v-model="leaveIdInfo.endTime" return-type="timestamp" placeholder="请选择消假结束时间" />
					</uni-forms-item>
					<uni-forms-item label="请假天数">
						<uni-easyinput disabled type="number" v-model="leaveIdInfo.dayNum"  placeholder="请输入消假天数" />
					</uni-forms-item>
				</block>
				<uni-forms-item label="消假开始时间" name="startTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.startTime" return-type="timestamp" placeholder="请选择消假开始时间" />
				</uni-forms-item>
				<uni-forms-item label="消假结束时间" name="endTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.endTime" return-type="timestamp" placeholder="请选择消假结束时间" />
				</uni-forms-item>
				<uni-forms-item label="消假天数" name="day">
					<uni-easyinput :disabled="!!processId" type="number" v-model="formData.day"  placeholder="请输入消假天数" />
				</uni-forms-item>
				<uni-forms-item label="消假理由" name="reason">
					<uni-easyinput :disabled="!!processId" type="textarea" autoHeight v-model="formData.reason" placeholder="请输入消假理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="消假相关文件上传" name="files">
					<uploadFile v-model="formData.files" :disabled="!!processId" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import bindingPersonnel from '@/components/user/bindingPersonnel.vue'
	import uploadFile from '@/components/common/uploadFile.vue'
	import {getIntDictOptions} from '@/utils/auth.js'
	import {createOaLeaveClear} from '@/api/oa/leaveclear/index.js'
	import {useVacation} from '@/api/user/userApi.js'
	import {httpStrToArr} from '@/utils/common.js'
	export default {
		components:{
			bindingPersonnel,
			uploadFile
		},
		props:{
			processId:'',
			propFromData:{}
		},
		watch:{
			propFromData(val){
				let formData = JSON.parse(JSON.stringify(val));
				formData.files = httpStrToArr(formData.files)
				this.formData = formData;
				this.leaveIdInfo = val.bpmOALeaveRespVO;
			},
		},
		data() {
			return {
				formData:{
					applicant:this.$store.state.user.name,
					leaveId:'',
					startTime:'',
					endTime:'',
					day:'',
					reason:'',
					files:[]
				},
				oaLeaveType: [],
				remaining:0,
				rules: {
					applicant: {
						rules: [{
							required: true,
							errorMessage: '请输入请假申请人',
						}]
					},
					leaveId:{
						rules: [{
							required: true,
							errorMessage: '请选择请假申请单',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假开始时间',
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假结束时间',
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择请假类型',
						}]
					},
					day: {
						rules: [{
							required: true,
							errorMessage: '请输入请假天数',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入请假理由',
						}]
					},
				},
				// 选中的请假申请单
				leaveIdInfo:{
				},
				// 
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let info = await createOaLeaveClear(this.formData);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/leaveclear/index'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			// 点击关联请假申请单
			clickOpen(){
				// 跳转选择请假申请单页面
				uni.navigateTo({
					url:'/pages/process/leaveclear/selectList'
				})
			},
		},
		async onShow() {
			this.oaLeaveType = await getIntDictOptions('oa_leave');
			console.log(this.oaLeaveType);
			uni.$once('selectViewersEvent', (data) => {
				console.log('selectViewersEvent',{data});
				this.leaveIdInfo = data;
				this.formData.leaveId = data.id;
				this.$refs.form.setValue('leaveId', data.id)
			});
		},
		async mounted() {
			this.oaLeaveType = await getIntDictOptions('oa_leave');
			console.log(this.oaLeaveType)
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
